import getComponentRootDom from "./getComponentRootDom";
import Icon from "@/components/Icon";
import styles from "./showMessage.module.less";

/**
 * 
 * @param {String} content 弹框内容
 * @param {String} type 消息类型：warn success error info
 * @param {Number} duration 消息弹框多久消失
 * @param {HTMLElement} container 消息弹框 在该容器中居中，无值则在页面中居中
 */
export default function (options) {
  const content = options.content || "";
  const type = options.type || "info";
  const duration = options.duration || 2000;
  const container = options.container || document.body;

  // 1. 创建消息弹框容器
  const div = document.createElement("div");
  // 2. 给消息弹框容器添加内容元素
  const iconDom = getComponentRootDom(Icon, { type });
  div.innerHTML = `<span class='${styles.icon}'>${iconDom.outerHTML}</span><div>${content}</div>`;

  // 3. 设置弹框容器 样式
  // 不同类型消息的样式
  const typeClass = styles[`message-${type}`];
  div.className = `${styles.message} ${typeClass}`;
  // 存在父容器时，把父容器设置成相对定位，body不能设置
  if (options.container) {
    if (getComputedStyle(container).position == "static") {
      container.style.position = "relative";
    }
  }
  // 4. 把弹框容器添加到容器中
  container.appendChild(div);

  // 浏览器强制刷新一次，已显示动画效果
  div.clientHeight;

  // 返回原位置
  div.style.opacity = 1;
  div.style.transform = `translate(-50%, -50%)`;

  // 等一段时间后 弹框消失
  setTimeout(function () {
    div.style.transform = `translate(-50%, -50%) translateY(25px)`;
    div.style.opacity = 0;
    div.addEventListener("transitionend", function () {
      options.callback && options.callback();
      div.remove();
    }, { once: true });
  }, duration);

}